<template>
    <div>
      <div class="echarts" ref="echarts"></div>
      <div  v-if='customer' class="customer">
        <slot></slot>
      </div>
      <div v-else>
        <div class="text long" v-if="(timer / total) > 0.5"> 还有一定时间， 请您耐心等待 </div>
        <div class="text short"v-else> 剩余时间不多了， 您待会可以去取衣了 </div>
      </div>
    </div>
</template>
<script>
  /* eslint-disable */
  import echarts from 'echarts';
  function filterTime(date) {
    let hours = parseInt(date / 1000 / 3600);
    if (hours < 10 && hours >= 0) {
      hours = '0' + hours;
    }
    let minute = parseInt((date % 3600000) / 1000 / 60);
    if (minute < 10 && minute >= 0) {
      minute = '0' + minute;
    }
    let seconds = parseInt((date % 60000) / 1000);
    if (seconds < 10 && seconds >= 0) {
      seconds = '0' + seconds;
    }
    return (hours === 0 ? '' : hours + ' : ')  + minute + ' : ' + seconds
  }

  function getOption(surplus, total, color) {
    var angle = [220, -40],
      splitNum = 25,
      curAngle = 220 - (surplus / total) * 260,
      curSplitNum = (angle[0] - curAngle) / ((angle[0] - angle[1]) / splitNum),
      pointColor = '#ffee30';
    return { // 10.4
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        series: [{
          name: "背景层",
          type: "gauge",
          splitNumber:25,
          startAngle: 220,
          endAngle: -40,
          axisLine: {
            "lineStyle": {
              "color": [
                [1, 'transparent'],
                [1, "transparent"],
              ],
              shadowColor: '#f3f5f6',
              "width": 10
            },

          },
          axisTick: {
            lineStyle: {
              color: '#d7e1ed',
              width: 2
            },
            length: 10,
            splitNumber:2
          },
          pointer: {
            show:false
          },
          axisLabel: {
            show:false,
          },
          splitLine: {
            "show": false
          },
          itemStyle: {
            normal: {
              color: "#494f50"
            }
          },
          detail: {
            show: false,
            formatter: function (value) {
              return value
            },
            offsetCenter: [0, 0],
            textStyle: {
              fontSize: 20,
              color: color
            }
          },
          title: {
            offsetCenter: [0, 0],
            textStyle: {
              fontSize: 20,
              color: color
            }
          },
          data: [{
            name: filterTime(surplus),
            value: ''
          }]
        },
          {
            name: "仪盘表",
            type: "gauge",
            splitNumber: curSplitNum,
            startAngle: angle[0],
            endAngle: curAngle,
            axisLine: {
              "lineStyle": {
                "color": [
                  [0, 'transparent'],
                  [1, "transparent"],
                ],
                shadowColor: '#f3f5f6',
                "width": 10
              },

            },
            axisTick: {
              lineStyle: {
                color: color,
                width: 2
              },
              length: 10,
              splitNumber:2
            },
            pointer: {
              show:false
            },
            axisLabel: {
              show:false,
            },
            splitLine: {
              "show": false
            },
            itemStyle: {
              normal: {
                color: "#494f50"
              }
            },
            detail: {
              show: false,
              formatter: function (value) {
                return value
              },
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: 20,
                color: color
              }
            },
            title: {
              offsetCenter: [0, 0],
              textStyle: {
                fontSize: 20,
                color: color
              }
            }
          }]
//          {
//            name: "警戒值红线阴影",
//            type: "gauge",
//            radius: '80%',
//            startAngle: angle[0],
//            endAngle: angle[1],
//            splitNumber: 1,
//            axisLine: {
//              lineStyle: {
//                color: [
//                  [(angle[0] - curAngle) / (angle[0] - angle[1] - 5) - 0.001, 'transparent'],
//                  [(angle[0] - curAngle) / (angle[0] - angle[1] - 5) + 0.008, pointColor],
//                  [1, "transparent"]
//                ],
//                shadowColor: '#942B01',
//                shadowBlur: 8,
//                width: 15
//              }
//            },
//            axisTick: {
//              show: false
//            },
//            axisLabel: {
//              show: false
//            },
//            splitLine: {
//              show: false
//            },
//            itemStyle: {
//              normal: {
//                color: "transparent"
//              }
//            },
//            pointer: {
//              length: 0
//            },
//            detail: {
//              show: false
//            },
//            title: {
//              show: false
//            },
//            data: [{
//              name: "",
//              value: ''
//            }]
//          }
      }
  }
  function detectionData(str) {
    var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
      offset: 0,
      color: 'rgba(243, 238,67, 1)'
    }, {
      offset: 0.5,
      color: 'rgba(225, 128,78, 1)'
    }, {
      offset:1,
      color: 'rgba(237, 92,79, 1)'
    }]);
    if (str >= 30 && str <= 60) {
      color =  new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(243, 238,67, 1)'
      }, {
        offset: 0.5,
        color: 'rgba(225, 128,78, 1)'
      }, {
        offset:1,
        color: 'rgba(237, 92,79, 1)'
      }]);
    } else if (str > 60) {
      color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
        offset: 0,
        color: 'rgba(243, 238,67, 1)'
      }, {
        offset: 0.5,
        color: 'rgba(225, 128,78, 1)'
      }, {
        offset:1,
        color: 'rgba(237, 92,79, 1)'
      }]);
    }
    return color;
  }

  export default {
    props: {
      item: {
        type: Object,
        require: true
      },
      customer: {
        type: Boolean,
        default: false
      },
      unOrder: {
        type: Boolean,
        default: false
      }
    },

    data () {
      return {
        timer: 0,
        time: 1999999,
        total: 2000001
      }
    },

    created () {
      if (!this.unOrder) {
        this.total = +this.item.consumeTime * 1000 * 60;
        this.time = this.total - (Date.now() - this.item.payTime) > 1000 ? this.total - (Date.now() - this.item.payTime) : 0;
      } else {
        this.total = this.item.consumeTime ? this.item.consumeTime * 1000 * 60 : 0;
//        if ()
        this.time = this.total - (Date.now() - new Date(this.item.payTime.replace(/-/g,'/')).getTime()) > 1000 ? this.total - (Date.now() - new Date(this.item.payTime.replace(/-/g,'/')).getTime()) : 0;
      }
    },

    mounted () {
      const that = this;
      that.timer = this.time;
      let color = '#2e99fa';
      let myChart = echarts.init(this.$refs.echarts);
      myChart.setOption(getOption(0, 100, color));
      let timer = setInterval(function () {
        that.timer -= 1000;
        if (that.timer <= 1000) {
          that.$emit('updateData')
          clearInterval(timer);
          that.timer = 0;
        }
        if(that.timer / that.total < 0.5) {
          color = '#fda51d';
        }
        that.$nextTick(() => {
          myChart.setOption(getOption(that.timer, that.total, color));
        })
      }, 1000)
    }
  }
</script>
<style scoped lang="scss">
  @import '../styles/common/common';
  .text {
    text-align: center;
    margin-bottom: 10px;
  }
  .text.long {
    color: #2f9afd;
  }
  .text.short {
    color: #f17e36;
  }
  .echarts {
    width: 100%;
    height: 200px;
  }
  .customer {
    p {
      text-align: center;
      margin-bottom: 10px;
      color: #2f9afd;
      font-size: px2rem(30);
    }
  }
</style>
